<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="table-head">
        <el-button type="primary">新增菜品分类</el-button>
        <el-button type="warning">新增套餐分类</el-button>
        <p>{{ timestamp }}</p>
      </div>
      <div class="table-body">
        <div class="inner-table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="分类名称" align="center" />
            <el-table-column prop="type" label="分类类型" align="center">
              <template #default="scope">
                {{ scope.row.type === 'null' ? conboClassify : foodClassify }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间" align="center" />
            <el-table-column prop="sort" label="排序" align="center" />
            <el-table-column prop="id" label="操作" align="center">
              <template #default="scope1">
                <el-button
                  type="text"
                  size="default"
                  @click="updateClassify(scope1.row)"
                >
                  修改
                </el-button>
                <el-dialog title="修改分类" :visible.sync="updateDialog" width="30%">
                  <el-form :model="dialogTextInfo">
                    <el-form-item label="分类名称：" :label-width="formLabelWidth">
                      <el-input v-model="dialogTextInfo.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="排序：" :label-width="formLabelWidth">
                      <el-input v-model="dialogTextInfo.sort" autocomplete="off" />
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="updateDialog = false">取 消</el-button>
                    <el-button type="primary" @click="updateDialogText">确 定</el-button>
                  </div>
                </el-dialog>
                <el-divider direction="vertical" />
                <el-popconfirm
                  title="确认删除该记录?"
                  @onConfirm="deleteClassify(scope1.row.id)"
                >
                  <el-button
                    slot="reference"
                    size="default"
                    type="text"
                    style="color: red"
                  >
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="table-foot">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 40]"
          :total="totalPage"
          :current-page="pageInfo.page"
          :page-size="pageInfo.pageSize"
          @current-change="classifyPageChange"
          @size-change="classifySizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryPage, editCategory, deleCategory } from '@/api/classifyManage'
import { formatTimestamp } from '@/utils/date'
export default {
  data() {
    return {
      tableData: [
        // { name: '3', type: 'null', createTime: '2025-02-24 15:10:24', sort: 0 }
      ],
      // 修改信息框
      updateDialog: false,
      // 长度
      formLabelWidth: '100px',
      dialogTextInfo: {
        name: '',
        sort: 0
      },
      conboClassify: '套餐分类',
      foodClassify: '菜品分类',
      totalPage: 0,
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      // 时间戳格式化测试
      timestamp: 134500
    }
  },
  created() {
    this.getClassifyList()
    this.timestamp = formatTimestamp(this.timestamp)
  },
  methods: {
    // 获取列表数据
    getClassifyList() {
      getCategoryPage(this.pageInfo).then(res => {
        const { total, records } = res.data
        this.tableData = records
        this.totalPage = total
      })
    },

    classifyPageChange(val) {
      this.pageInfo.page = val
      this.getClassifyList()
    },
    classifySizeChange(val) {
      this.pageInfo.page = 1
      this.pageInfo.pageSize = val
      this.getClassifyList()
    },
    // 修改分类信息
    updateClassify(msg) {
      // 弹窗
      this.updateDialog = true
      // 信息补全
      this.dialogTextInfo = msg
    },
    // 弹窗确认修改
    updateDialogText() {
      const { id, name, sort } = this.dialogTextInfo
      // 关闭弹窗
      this.updateDialog = false
      editCategory({ id, name, sort }).then(this.$message.success('修改成功'))
    },
    // 删除分类信息
    deleteClassify(msg) {
      console.log('删除分类信息删除分类信息', msg)
      deleCategory({ id: msg }).then(res => this.$message.error(res))
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
